/*
 * @Author: Salaing
 * @Date: 2025-02-25 16:34:54
 * @LastEditors: Salaing
 * @LastEditTime: 2025-03-06 22:32:04
 * @Description: file content
 */
function countdown(seconds) {
    let timer = setInterval(function () {
        seconds--;

        if (seconds <= 0) {
            clearInterval(timer);
            console.log('倒计时结束');
        }
        console.log(seconds + 1);

    }, 1000);
}


import React, { useState, useEffect } from 'react';

function Countdown({ initialSeconds }) {
    const [seconds, setSeconds] = useState(initialSeconds);

    useEffect(() => {
        if (seconds > 0) {
            const timer = setInterval(() => {
                setSeconds(prevSeconds => prevSeconds - 1);
            }, 1000);

            // 清除定时器
            return () => clearInterval(timer);
        } else {
            console.log('倒计时结束');
        }
    }, [seconds]);

    useEffect(() => {
        if (seconds <= 0) {
            console.log('倒计时结束');
        }
    }, [seconds]);

    return (
        <div>
            <p>剩余时间: {seconds} 秒</p>
        </div>
    );
}

export default Countdown;

// countdown(5);


function compareVersion(v1, v2) {
    v1 = v1.split('.');
    v2 = v2.split('.');
    const len = Math.max(v1.length, v2.length);

    for (let i = 0; i < len; i++) {
        const num1 = parseInt(v1[i]) || 0;
        const num2 = parseInt(v2[i]) || 0;

        if (num1 > num2) {
            return 1;
        } else if (num1 < num2) {
            return -1;
        }
    }
    console.log('版本号相同');
    return 0;
}
const result = compareVersion('1.2.3', '1.2.4');
// console.log(result); // 输出 


function formatNumber(num) {
    // 递归调用formatNumber函数，处理数字的高位部分
    // 使用Math.floor(num/1000)来获取除最后三位的剩余数字部分
    // 使用num.toString().slice(-3)来获取数字的最后三位部分
    // 将两部分用逗号连接并返回
    if (num < 1000) return num.toString()
    return formatNumber(Math.floor(num / 1000)) + ',' + num.toString().slice(-3)

}

function treeTransform(data) {
    data.forEach(element => {
        element.children = []
    });

    data.forEach((item) => {
        if (item.parentId === null) {
            tree.push(item)
        } else {
            const parent = data.find(item => item.id === item.parentId)
            if (parent) {
                parent.children.push(item)
            }
        }
    })
    return tree
}


function bubbleSort(arr) {
    for (let i = 0; i < arr.length - 1; i++) {

        for (let j = 0; j < arr.length - i - 1; j++) {

            if (arr[j] > arr[j + 1]) {
                let temp = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = temp
            }
        }
    }
    return arr
}
// 测试数组
const array = [64, 34, 25, 12, 22, 11, 90];
console.log("Original array:", array);

// 调用冒泡排序
const sortedArray = bubbleSort(array);
console.log("Sorted array:", sortedArray);
function merge(A, B) {
    // write code here
    console.log(B);

    const arr = A.concat(B)
    arr.sort((a, b) => a - b)
    return arr
}
const sortArr = merge([4, 5, 6], [1, 2, 3])
console.log(sortArr)
/* 原型链的理解   所有的方法都能在原型链上找到
JavaScript 中，每个对象都有一个内部属性 [[Prototype]]，
它指向另一个对象，这个被引用的对象被称为“原型”。当访问一个对象的属性时，
JavaScript 引擎会首先检查该对象本身是否有这个属性。如果没有找到，
则会沿着 [[Prototype]] 链向上查找，
直到找到该属性或到达原型链的末端（即 null）。 */



// 伪类高 10 伪元素的优先级，1
// 1. 浏览器渲染过程
//
// 浏览器的渲染 我答先写js 后生成som树然后dom树 先渲染dom树宰渲染som树
// 事件冒泡和捕获 父子组件的事件，子组件执行事件父组件那个先触发 答对了
// 5. vite的按需加载怎么实现的？
/* Vite 支持 ES 模块的动态 import() 语法，这是实现按需加载的核心。与静态 import 不同，
动态 import() 只会在实际执行时加载模块，而不是在初始加载时。
// 静态 import (会打包在一起)
import { someFunction } from './module.js';

// 动态 import (按需加载)
const loadModule = async () => {
    const module = await import('./module.js');
    module.someFunction();
};

*/

// 6. webpack也可以热更新，增量patch怎么实现的？
/* 
    webpack的增量更新是通过模块热替换（Hot Module Replacement，HMR）来实现的。
    HMR 是一个功能，它允许在运行时更新代码，而无需完全刷新整个页面。
    当模块发生变化时，HMR 会自动更新模块，而不需要重新加载整个页面。
    这就是为什么在 webpack 中，我们可以使用 import() 语法来动态加载模块，
    而不需要担心模块的加载时间过长。
    HMR 的实现原理是：
    1. 在 webpack 中，我们可以使用 import() 语法来动态加载模块。
    2. 当模块发生变化时，webpack 会自动编译新的模块。
        3. 然后，webpack 会将新的模块加载到内存中，并替换旧的模块。
        4. 最后，webpack 会通知浏览器，新的模块已经加载，浏览器会自动更新页面。
        5. 这样，我们就实现了增量更新，无需完全刷新整个页面。
        6. HMR 的另一个优点是，它可以在开发过程中，快速地更新页面，
    // webpack.config.js
module.exports = {
    devServer: {
        hot: true, // 启用热更新
        liveReload: false, // 禁用自动刷新
    },
};
// webpack.config.js
const webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 启用 HMR 插件
    ],
};
*/

class ImageLoaderPool {
    constructor(maxConcurrent) {
        this.maxConcurrent = maxConcurrent;
        this.currentCount = 0;
        this.queue = [];
    }

    async loadImage(url) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = () => resolve(url);
            img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
            img.src = url;
        });
    }

    async addTask(url) {
        if (this.currentCount >= this.maxConcurrent) {
            await new Promise(resolve => this.queue.push(resolve));
        }
        this.currentCount++;
        try {
            const result = await this.loadImage(url);
            console.log(`Image loaded: ${result}`);
        } catch (error) {
            console.error(error);
        } finally {
            this.currentCount--;
            // 从队列中取出下一个任务并执行
            if (this.queue.length > 0) {
                this.queue.shift()();
            }
        }
    }

    async addTasks(urls) {
        const tasks = urls.map(url => this.addTask(url));
        await Promise.all(tasks);
    }
}

// 使用示例
const imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    'https://example.com/image4.jpg',
    'https://example.com/image5.jpg',
    'https://example.com/image6.jpg',
    // 添加更多图片 URL
];

const pool = new ImageLoaderPool(3);
pool.addTasks(imageUrls);